<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ include file="../../../../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<style type="text/css">
.ui-pg-input {
	text-align: center;
}
	#btn-search{
		background: #009fff;
		border: blue;
	}

</style>
</head>
<body>
	

	<div class="mod-toolbar-top cf" style="margin-top: 10px;">
		<div class="fr" style="margin-top: 10px;">
			<a href="javascript:void();" class="ui-btn ui-btn-sp mrb"
				id="btn-add">新增</a><a href="javascript:void();" class="ui-btn ui-btn-sp mrb"
		id="btn-search">搜索</a> 
				<a href="javascript:void(0);" class="ui-btn"
				id="btn-record">刷新</a> 
		</div>
	</div>
	<div class="grid-wrap" align="left" style="margin-left: 10px;">
		<table id="grid1"></table>
		<div id="pager2"></div>
	</div>
	<script type="text/javascript">

		function update() {
			alert("update");
			$.ajax({
				url : "update",
				dataType : "json",
				success : function(data) {

				},
				erro : function() {
					alert("爆炸了！");
				}

			});
		}
		function deletes() {
			alert("update");
			$.ajax({
				url : "delete",
				dataType : "json",
				success : function(data) {

				},
				erro : function() {
					alert("爆炸了！");
				}
			});
		}
		function clearGrid() {
			$("#grid").jqGrid('clearGridData');
		}
		//添加图标
		function operationFormat(cellValue, options, rowObject) {
			return '<div class="operating" data-id="' + options.rowId + 
			'"><span class="ui-icon ui-icon-pencil" title="编辑" data-toggle="modal" data-target="#myModal"></span>&nbsp&nbsp'
					+ '<span class="ui-icon ui-icon-trash" title="删除"></span>';
		}
	
		$(function() {
			$("#grid1").jqGrid(
					{
						url : "Role/listRole",
						datatype : "json",
						height : 400,
						width : '100%',
						shrinkToFit : false,
						autoScroll : false,
						rownumbers : true,
						cellEdit : true,
						cellsubmit : "clientArray",
						colNames : [  '公司名称', '角色编码', '角色名称', '备注',
								'使用标志','操作'],
						colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
						 {
							name : 'companyid',
							index : 'companyid',
							width : 120,
							editable : false,
							editoptions : {
								size : 10
							},
							searchoptions : {
								sopt : [ 'cn' ]
							},
						}, {
							name : 'rolecode',
							index : 'rolecode',
							width : 130,
							editable : false,
							editoptions : {
								size : 10
							},
							searchoptions : {
								sopt : [ 'cn' ]
							},
						}, {
							name : 'rolename',
							index : 'rolename',
							width : 130,
							sortable : false,
							editable : false,
							editoptions : {
								size : 10
							},
							searchoptions : {
								sopt : [ 'cn' ]
							},
						}, {
							name : 'remark',
							index : 'remark',
							width : 130,
							sortable : false,
							editable : false,
							editoptions : {
								size : 10
							},
							search : false,
						}, {
							name : 'active',
							index : 'active',
							width : 120,
							sortable:false,
							editable : false,
							editoptions : {
								size : 10
							},
							search : false,
						},{
							name : "operating",
							width : 70,
							formatter : operationFormat,
							align : "center",
							sortable : false
						},

						],
						rowNum : 10,// 一页显示多少条
						rowList : [ 10, 20, 30 ],// 可供用户选择一页显示多少条
						pager : '#pager2',// 表格页脚的占位符(一般是div)的id
						sortname : 'id',// 初始化的时候排序的字段
						sortorder : "asc",// 排序方式,可选desc,asc
						mtype : "get",// 向后台请求数据的ajax的类型。可选post,get
						viewrecords : true,
						pgbuttons : true,
						autowidth : true,
						loadComplete : function() {
							loadover();
						},
						gridComplete : function() {
						},
						afterInsertRow : function() {
						},
						beforeEditCell : function(rowid, cellname, v, iRow,
								iCol) {
							lastrow = iRow;
							lastcell = iCol;
						}
					});
			initTableRow();
			initEvent();
		})
		//设置每行的高度
		function loadover() {
			var grid = $("#grid1");
			var ids = grid.getDataIDs();
			for (var i = 0; i < ids.length; i++) {
				grid.setRowData(ids[i], false, {
					height : 35
				});
			}
		}
		function initTableRow() {
			for (var i = 1; i <= 4; i++) {
				jQuery("#grid1").jqGrid('addRowData', i, {});
			}
			loadover();
		}
		//添加事件
		function initEvent() {
			
			$("#btn-add").click(function(a) {
				handle.operate("add");
			}),  $("#btn-search").click(function(a){
				handle.search();
			}),$("#grid1").on("click", ".operating .ui-icon-pencil",
					function(a) {
						var rowid = $(this).parent().data("id");
						var rowdata = $("#grid1").jqGrid("getRowData", rowid);
						handle.operate("edit", rowid, rowdata);
			}), $("#grid1").on("click", ".operating .ui-icon-trash",
					function(a) {
						a.preventDefault();
						var rowid = $(this).parent().data("id");
						handle.del(rowid);
			}), $("#btn-record").click(function(a) {
						$('#grid1').jqGrid('setGridParam',{search:false});  
						$("#grid1").jqGrid().trigger("reloadGrid");
			})

		}
		handle = {
			operate : function(oper, rowid, rowdata) {
				var title;
				var data = {};
				if ("add" == oper) {
					title = "新增角色";
					data = {
						operate : oper,
						callback : this.callback
					}
				} else {
					title = "修改角色";
					data = {
						operate : oper,
						rowdata : rowdata,
						rowid : rowid,
						callback : this.callback
					}
				}
				this.dialog = $.dialog({
					title : title,
					data : data,
					content : "url:Role/editjsp",
					width : 500,
					height : 250,
					max : false,
					min : false,
					cache : false,
					lock : true
				});
			},
			search:function(){
				var grid=$("#grid1");
				this.dialog = $.dialog({
					title : "搜索",
					data : {
						callback:this.callback,
						grid:grid
					},
					content : "url:/Role/searchjsp",
					width : 500,
					height : 250,
					max : false,
					min : false,
					cache : false,
					lock : true
				});
			},
			del : function(rowId) {
				$.dialog.confirm("删除的参数类型将不能恢复，请确认是否删除？", function() {
					/* Public.ajaxPost("category/deleteType", {
						id: rowId
					}, function(data) {
						alert(data);
						$("#grid1").jqGrid().trigger("reloadGrid");
					}); */
					$.ajax({
						url : encodeURI("/Role/editRole"),
						type : "POST",
						data : {
							"id" : rowId,
							"oper" : "del"
						},
						
						success : function(data) {
							if (data.status == 200) {
								Public.tips({
									content : "删除角色成功"
								})
								CallBack();
							} else if(data.status == 888){
								Public.tips({
									type : 1,
									content : "删除角色失败:没有权限" 
								})
							}else {
								Public.tips({
									type : 1,
									content : "删除角色失败:" + data.msg
								})
							}
							$("#grid1").jqGrid().trigger("reloadGrid");
						}
					});
				});
			},
			callback : function(data) {
				if(data!=undefined){
					$('#grid1').jqGrid('setGridParam',{search:true});  
					$("#grid1").jqGrid("setGridParam",{postData:data}).jqGrid("setGridParam",{page:1}).trigger("reloadGrid");
				}else{
					$("#grid1").jqGrid().trigger("reloadGrid");
				}
			}
			
		};
	</script>
</body>
</html>